<template>
  <div>
    <!-- <div>布布一二一起的时间：{{ time }}天</div>
    <div @click="update">加一</div> -->
    <UseTable
      :tableData="tableData"
      :columnList="columnList"
      :iSOnlyShow="iSOnlyShow"
      @handAdd="handAdd"
      @handDel="handDel"
      @handEdit="handEdit"
    ></UseTable>

    <el-dialog :title="isEditText" :visible.sync="dialogVisible" width="600px">
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入姓名"
                :disabled="isEdit"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import UseTable from "../components/UseTable.vue";
import { mapState, mapActions } from "vuex";
export default {
  name: "Money",
  components: {
    UseTable,
  },

  data() {
    return {
      //表格数据
      tableData: [
        {
          date: "2016-5-2",
          name: "一二",
          address: "一二",
        },
        {
          date: "2016-5-4",
          name: "布布",
          address: "布布",
        },
      ],
      //表格列
      columnList: [
        {
          prop: "date",
          label: "日期",
        },
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "address",
          label: "地址",
        },
      ],

      //展示按钮
      iSOnlyShow: true,
      //弹窗
      dialogVisible: false,
      //表单
      form: {},
      //编辑 还是 新增
      isEdit: true,
    };
  },
  methods: {
    ...mapActions(["updatetime"]),

    handAdd() {
      // let list = [...this.tableData];
      // list.push({
      //   date: "2016-05-03",
      //   name: "糖糖",
      //   address: "糖糖",
      // });
      // this.tableData = list;

      //设置弹窗属性
      this.isEdit = false;
      //弹窗
      this.dialogVisible = true;
    },
    handDel(row) {
      // 拷贝
      let list = [...this.tableData];
      //过滤
      let newlist = list.filter((item) => item.name !== row.name);
      this.tableData = newlist;
    },
    handEdit(row) {
      this.isEdit = true;
      //表单赋值
      this.form = {
        name: row.name,
        address: row.address,
      };

      //弹窗
      this.dialogVisible = true;
    },
    submitForm() {
      if (this.isEdit) {
        //表格
        let list = [...this.tableData];

        // 找到要编辑的下标
        let editindex;
        list.forEach((item, index) => {
          if (item.name === this.form.name) {
            editindex = index;
          }
        });
        //替换
        list[editindex] = {
          ...list[editindex],
          name: this.form.name,
          address: this.form.address,
        };
        this.tableData = list;

        //重置
        this.form = {
          name: "",
          address: "",
        };
        //关闭弹窗
        this.dialogVisible = false;
      } else {
        let list = [...this.tableData];

        let date = new Date();

        let time =
          date.getFullYear() +
          "-" +
          Number(date.getMonth()) +
          1 +
          "-" +
          date.getDate();

        list.push({
          date: time,
          name: this.form.name,
          address: this.form.address,
        });

        this.tableData = list;

        //重置
        this.form = {
          name: "",
          address: "",
        };
        //关闭弹窗
        this.dialogVisible = false;
      }

      this.$message({
        message: "成功",
        type: "success",
      });
    },
    cancel() {
      this.dialogVisible = false;
    },
    update() {
      this.updatetime();
    },
  },

  computed: {
    ...mapState(["time"]),

    isEditText() {
      return this.isEdit ? "编辑" : "新增";
    },
  },
};
</script>

<style scoped></style>
